import React,{Component}from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import { View, Text, Image } from "react-native";
import HomePage from "./HomePage";
import AppListPage from "./AppListPage";
import {Images} from '../resource';
import SettingPage from './SettingPage'
const Tab = createBottomTabNavigator();
const TabStack = createStackNavigator();
export default class TabPage extends Component{


  getSettingPageNavigator() {
        

    return (
      <TabStack.Navigator>
        <TabStack.Screen
          name="settingPage"
          component={SettingPage}
          options={{
            headerTitle: '设置',
            headerLeft: null,
            headerTitleAlign: 'center',
            headerTitleStyle:{
              color: '#fff'
            },
            headerStyle:{
              backgroundColor:'#0081cc'
            }
          }}
        />
      </TabStack.Navigator>
    );
  }

    getAppListNavigator() {
        

        return (
          <TabStack.Navigator>
            <TabStack.Screen
              name="appList"
              component={AppListPage}
              options={{
                headerTitle: '应用列表',
                headerLeft: null,
                headerTitleAlign: 'center',
                headerTitleStyle:{
                  color: '#fff'
                },
                headerStyle:{
                  backgroundColor:'#0081cc'
                }
              }}
            />
          </TabStack.Navigator>
        );
      }
      


    render(){

        return (
            <Tab.Navigator
            screenOptions={({route}) => ({
              tabBarIcon: ({focused, color, size}) => {
                if (route.name === 'index') {
                  let imageObj;
    
                  if (focused){
                    return <Image source={Images.ic_tab_home_sel} style={{ width: 25, height: 25 }} />;
                  }else{
                    return <Image source={Images.ic_tab_home_nor} style={{ width: 25, height: 25 }} />;
                  }
      
                  // You can return any component that you like here!
                
                } else if (route.name === 'list') {
                  if (focused){
                    return <Image source={Images.ic_tab_app_sel} style={{ width: 25, height: 25 }} />;
                  }else{
                    return <Image source={Images.ic_tab_app_nor} style={{ width: 25, height: 25 }} />;
                  }
                } else if (route.name === 'setting') {
                  if (focused){
                    return <Image source={Images.ic_tab_setting_sel} style={{ width: 25, height: 25 }} />;
                  }else{
                    return <Image source={Images.ic_tab_setting_nor} style={{ width: 25, height: 25 }} />;
                  }
                } 
              },
            })}>
            <Tab.Screen
              name="index"
              component={HomePage}
              options={{title: '首页', headerMode: 'none',headerShown: false}}
            />
            <Tab.Screen
              name="list"
              component={this.getAppListNavigator}
              options={{title: '应用', headerMode: 'none', headerShown: false}}
            />

            <Tab.Screen
              name="setting"
              component={this.getSettingPageNavigator}
              options={{title: '设置', headerMode: 'none', headerShown: false}}
            />
      
          
          </Tab.Navigator>

        );
    }
}